<template>
	<view class="content"
		:style="{'paddingBottom': paddingBottom +'px'}"
	>
		<addressItem class="address-item" isDefault></addressItem>
		<addressItem class="address-item"></addressItem>
		
		<view id="add-container" class="add-container" @click="goAddNewAddress">
			<image class="add-icon" src="@/static/add.png"></image>
			<text>新增地址</text>
		</view>
	</view>
</template>

<script setup>
import addressItem from '@/subpages/widgets/addressItem.vue';
import { onLoad, onShow } from '@dcloudio/uni-app'
import { boundingClientRect } from '@/tools/tools.js';
import { ref } from 'vue';
const paddingBottom = ref(0)
onShow(() => {
	boundingClientRect('#add-container').then((rect) => {
		paddingBottom.value = rect.height;
	})
})
function goAddNewAddress() {
	uni.navigateTo({
		url:'/subpages/my/add_edit_address'
	})
}
</script>

<style lang="scss">
.content {
	overflow-y: scroll;
	
	.add-container {
		background-color: #F7F7F7;
		border-top: 1px solid #efefef;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: env(safe-area-inset-bottom);
		height: 120rpx;
		min-height: 120rpx;
		color: $primary-color;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		.add-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 13rpx;
		}
	}
}
</style>
